<template>
  <div>
    <input type="text" v-model="inputValue" v-on:input="updateCharCount" placeholder="请输入内容">
    <p>当前输入的字符数为：{{ charCount }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const inputValue = ref('');
const charCount = ref(0);
const updateCharCount = () => {
  charCount.value = inputValue.value.length;
};
</script>

<style scoped>
input {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
p {
  margin: 0;
  color: #333;
}
</style>